<template>
   <div>
       <header>
           <!-- 子组件定义的变量，只能在子组件中使用，
            如果想要在父组件template中使用这些变量，可以把这些变量以属性的形式绑定在slot标签上
           -->
           <!-- 可以把user变量作为slot标签的属性绑定 -->
           <slot :user="user" :age="age">
               <!-- 默认内容 -->
               {{ user.lastName }}
            </slot>
            
            <slot name="footer" :msg="msg"></slot>
       </header>
   </div>
</template>

<script>
// 作用域插槽：插槽可以携带参数，并且这些参数有访问的限制
// 子组件插槽转过来的值，只能在对应的template模板中使用

// 1. 给slot标签添加属性的方式，传参
//  <slot name="footer" abc="abc" msg="123"></slot>

// 2. 所有被被添加的属性，都放到了一个对象中 slotProps 中
//  {abc:'abc', msg:'123'}

// 3. 在使用组件的使用，template + v-slot:footer="slotProps"
    // <template v-slot:footer="{ msg }">
    //      <p>{{ msg }}</p>
    //   </template>

// 4. 可以简写v-slot => # , 还可以解构这个对象 
//    ==>  #footer="{ msg }"
export default {
    data(){
        return {
            user:{
                lastName:'王',
                firstName:'大锤'
            },
            age:18,
            msg:'footer-msg'
        }
    }
}
</script>

<style>

</style>